﻿<!-- Views/Employee/EndPractice.cshtml -->
@model WebApplication1.Models.PracticeSession

@{
    ViewBag.Title = WebApplication1.Utilities.LanguageManager.GetText("PracticeResult") + " - " + WebApplication1.Utilities.LanguageManager.GetText("ExamTitle");
}

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="page-header mb-4 text-center">
                <h2 class="text-success">
                    <i class="glyphicon glyphicon-education"></i>
                    @ViewBag.PracticeResult
                </h2>
                <p class="lead">@Model.Exam.ExamName</p>
            </div>
        </div>
    </div>

    <!-- 练习结果概览 -->
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            <div class="card border-success shadow-sm">
                <div class="card-header bg-success text-white text-center">
                    <h4 class="mb-0">
                        <i class="glyphicon glyphicon-stats me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("PracticeSummary")
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="stat-card bg-light p-3 rounded">
                                <h5>@ViewBag.ExamName</h5>
                                <p class="mb-0">@Model.Exam.ExamName</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3 mb-md-0">
                            <div class="stat-card bg-light p-3 rounded">
                                <h5>@ViewBag.StartTime</h5>
                                <p class="mb-0">@Model.StartTime.ToString("yyyy-MM-dd HH:mm")</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="stat-card bg-light p-3 rounded">
                                <h5>@ViewBag.EndTime</h5>
                                <p class="mb-0">
                                    @if (Model.EndTime == null)
                                    {
                                        WebApplication1.Utilities.LanguageManager.GetText("NotCompleted");
                                    }
                                    else
                                    {
                                        @Model.EndTime.Value.ToString("yyyy-MM-dd HH:mm");
                                    }
                                       </p>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-center">
                                @{
                                    var accuracy = Model.TotalQuestions > 0 ? (double)Model.CorrectAnswers / Model.TotalQuestions * 100 : 0;
                                    var progressBarClass = accuracy >= 80 ? "bg-success" : (accuracy >= 60 ? "bg-warning" : "bg-danger");
                                }
                            
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 详细统计 -->
    <div class="row mb-4">
        <div class="col-md-10 mx-auto">
            <div class="card border-info">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="glyphicon glyphicon-list-alt me-2"></i>
                        @WebApplication1.Utilities.LanguageManager.GetText("DetailedStatistics")
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-3 mb-3">
                            <div class="stat-box p-3 bg-primary text-white rounded">
                                <div class="stat-number display-6">@Model.TotalQuestions</div>
                                <div class="stat-label">@ViewBag.TotalQuestions</div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="stat-box p-3 bg-success text-white rounded">
                                <div class="stat-number display-6">@Model.CorrectAnswers</div>
                                <div class="stat-label">@ViewBag.CorrectAnswers</div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="stat-box p-3 bg-danger text-white rounded">
                                <div class="stat-number display-6">@(Model.TotalQuestions - Model.CorrectAnswers)</div>
                                <div class="stat-label">@WebApplication1.Utilities.LanguageManager.GetText("WrongAnswers")</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-box p-3 @(accuracy >= 60 ? "bg-success" : "bg-danger") text-white rounded">
                                <div class="stat-number display-6">@accuracy.ToString("F1")%</div>
                                <div class="stat-label">@ViewBag.Accuracy</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="row">
        <div class="col-12 text-center">
            <div class="btn-group-lg" role="group">
                <a href="@Url.Action("PracticeDetails", "Employee", new { id = Model.SessionId })" class="btn btn-info me-2">
                    <i class="glyphicon glyphicon-list me-2"></i>@WebApplication1.Utilities.LanguageManager.GetText("ViewDetails")
                </a>
                <a href="@Url.Action("StartPractice", "Employee", new { id = Model.ExamId })" class="btn btn-success me-2">
                    <i class="glyphicon glyphicon-repeat me-2"></i>@WebApplication1.Utilities.LanguageManager.GetText("PracticeAgain")
                </a>
                <a href="@Url.Action("Index", "Employee")" class="btn btn-primary">
                    <i class="glyphicon glyphicon-home me-2"></i>@ViewBag.Back
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .stat-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .result-card {
        transition: transform 0.3s ease;
    }

    .result-card:hover {
        transform: scale(1.02);
    }

    .stat-box {
        transition: transform 0.2s ease;
    }

    .stat-box:hover {
        transform: translateY(-5px);
    }

    .display-6 {
        font-size: 2.5rem;
        font-weight: bold;
    }

    .btn-group-lg .btn {
        margin: 5px;
        padding: 12px 20px;
        font-size: 1.1rem;
        border-radius: 8px;
    }

    .page-header h2 {
        font-weight: 300;
    }

    .progress {
        border-radius: 10px;
    }

    .progress-bar {
        transition: width 1s ease-in-out;
    }

    @@media (max-width: 768px) {
        .btn-group-lg .btn {
            padding: 10px 15px;
            font-size: 1rem;
            margin: 3px;
        }

        .display-6 {
            font-size: 2rem;
        }

        .stat-number {
            font-size: 1.8rem !important;
        }
    }
</style>
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        // 添加动画效果
        $('.stat-card').each(function (index) {
            $(this).delay(200 * index).animate({ opacity: 1 }, 500);
        });

        $('.stat-box').each(function (index) {
            $(this).delay(300 * index).animate({ opacity: 1 }, 500);
        });

        // 进度条动画
        var progressBar = $('.progress-bar');
        var width = progressBar.width();
        progressBar.css('width', '0');
        setTimeout(function () {
            progressBar.animate({ width: width }, 1500);
        }, 500);
    });
</script>